<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>
<body>
    <!-- 改变宽度 -->
    <div class="box-1"></div>
    <!-- 改变高度 -->
    <div class="box-2"></div>
    <!-- 改变位置 -->
    <div class="box-3"></div>

    <script>
        // 场景:
            // 如果是一个标签使用动画, 那可以定义全局变量记录定时器
            var timer = null;
            // 如果是很多个标签使用动画,那么就不能定义全局变量记录定时器
            // dom.timer = null;

        
        // 对象:  {key: value}
        // var obj = {};
        // obj.aaa = "hello world";
        // obj.timer = setInterval(function(){},100)

        // dom对象
        var dom1 = document.querySelector(".box-1"); 
        console.log(typeof dom1); // object
        dom1.aaa = "hello world";
        dom1.timer = setInterval(function(){},100)

        var dom2 = document.querySelector(".box-2"); 
        dom2.aaa = "hello world";
        dom2.timer = setInterval(function(){},100)


        var dom3 = document.querySelector(".box-3");
        dom3.aaa = "hello world";
        dom3.timer = setInterval(function(){},100)


        // 问题:
            // 为什么把timer挂在dom对象身上?
            // 因为不同的标签可以执行不同的动画



    </script>
</body>
</html>